<template>
	<section class="star-percent">
		<section class="star-wrapper" v-for="star in stars">
			<span v-if="star.width==100"><i class="iconfont icon-206"></i></span>
			<span v-if="star.width==50"><i class="iconfont icon-banxing"></i></span>
			<span v-if="!star.width"><i class="iconfont icon-kongxinxing"></i></span>
		</section>
	</section>
</template>

<script>
	export default {
		props:{
			percent:{
				default:100
			},
			starCount:{
				default:5
			}
		},
		computed:{
			stars(){
				let coverPercent=100/this.starCount,
					coverStarCount=Math.floor(this.percent/coverPercent),
					leftPercent=this.percent%coverPercent,
					stars=[],i=0,leftPercentFilled=false
				while(i<this.starCount){
					if(i<coverStarCount){
						stars.push({width:100})
					}else{
						if(leftPercentFilled){
							stars.push({width:0})
						}else{
							leftPercent ? stars.push({width:50}) : stars.push({width:0})
							leftPercentFilled=true							
						}
					}
					i++
				}
				return stars
			}
		}
	}
</script>

<style lang="scss">
@import "../scss/variables.scss";
	.star-percent{
		display:flex;
		color:$colorSecondary;
		.star-wrapper{
			display:flex;
			width:1em;
			height:1em;
			i{
				color: #f98700;
			}
			span{
				width:1em;
				height:1em;
				font-size:1em;
				i{
					width:100%;
					height:100%;
					font-size:1em;
				}
			}
		}
	}
</style>